<template>
	<view class="content">
		<iframe allow="camera *;microphone *; display-capture" allowfullscreen="true" border="0" v-if="isVideoLive" webkitallowfullscreen="true" mozallowfullscreen="true" :src="url" frameborder="0" width="100%" height="100%"></iframe>
		<!-- <view class="back" @click="onBack">
			<tui-icon name="home-fill" :size="34" color="#999"></tui-icon>
		</view>
		<view class="back" @click="qiandao" style="bottom: 46vh;right: 30rpx;z-index: 999999;">
			<image src="../../static/qiandao_1.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
		</view> -->
		<tui-orderDetail ref="tOrderDetail" @finish='finish' :show="isShow" :id="id" @close="isShow=false"></tui-orderDetail>
		<tui-ConfirmOrder ref="tConfirmOrder" @finish='cfmfinish' :show="cjshow"  @close="cjshow=false"></tui-ConfirmOrder>
		<tui-PayResult ref="tPayResult" @finish='payfinish' :zhifu="zhifu" :show="payshow"  @close="payshow=false"></tui-PayResult>
		<!-- <tui-treeZhifu ref="ttreeZhifu" :url="zhiurl" :show="zhishow"  @close="zhishow=false"></tui-treeZhifu> -->
		<tui-OrderList ref="tOrderList" :show="dingdanshow"  @close="dingdanshow=false"></tui-OrderList>
		<tui-login :show="show"  @close="guanbi"></tui-login>
		<view :class="bottomshow?'showYhq fade-in':'showYhq'">
			<view class="list" v-if="coupon_data.coupon_type==3">
				<view class="title text_one">{{coupon_data.name}}</view>
				<view class="duihuan flex flex-center">
					<view class="center">{{parseInt(coupon_data.price)}}</view>
					<view class="yuan">张</view>
				</view>
				<view class="tiaojian">仅兑换商品可用</view>
				<!-- <view class="time">{{coupon_data.start_time}}至{{coupon_data.end_time}}</view> -->
				<view class="btn flex flex-align flex-center" @click="tui.dianji(getYhq)">立即领取</view>
			</view>
			<view class="list yhlist" v-else>
				<view class="title text_one">{{coupon_data.name}}</view>
				<view class="duihuan flex flex-center">
					<view class="center">{{parseInt(coupon_data.price)}}</view>
					<view class="yuan">元</view>
				</view>
				<view class="tiaojian">适用于部分商品</view>
				<!-- <view class="time">{{coupon_data.start_time}}至{{coupon_data.end_time}}</view> -->
				<view class="btn flex flex-align flex-center" @click="tui.dianji(getYhq)">立即领取</view>
			</view>
		</view>
		<tui-modal :show="modal" background='transparent' @cancel="modal=false" :custom="true">
			<view class="imaggs">
				<image src="/static/zibo_03.png" mode=""></image>
				<view class="flex flex-align flex-center" style="margin-top: 10rpx;" @click="modal=false">
					<tui-icon name="close" :size="28" class="#fff"></tui-icon>
				</view>
			</view>
		</tui-modal>
	</view>
</template>
<script>
	import Vue from 'vue';
	import GoEasy from '@/uni_modules/goeasy-js/js_sdk/goeasy-2.12.4.esm.min.js';
	export default {
		data() {
			return {
				isPlaySource: false, //是否有播放源
				isVideoLive: false, //是否是直播
				isAutoplay: true, //是否自动播放
				videoMsg: '', //video消息
				currentUrl: '', //播放路径
				showControlbar: true,
				timer:null,
				url:'',
				image:'',
				id:'',
				course_name:'',
				isShow:false,
				cjshow:false,
				payshow:false,
				zhifu:'',
				zhishow:false,
				zhiurl:'',
				dingdanshow:false,
				show:false,
				dataInfo:'',
				page:1,
				goeasy:'',
				room_id:'',
				coupon_data:'',
				bottomshow:false,
				modal:false
			}
		},
		
		onLoad(e) {
			let that = this
			that.dataInfo = e
			if(this.tui.isLogin()){
				that.getStatus()
				this.getJianting()
			}else{
				uni.setStorageSync('refCode', e.inviter_code)
				uni.setStorageSync('zhiboid', e.zhiboid)
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			
			// const vconsole = require('vconsole')
			// Vue.prototype.$vconsole = new vconsole() // 使用vconsole
			// this.url =uni.getStorageSync('zhiboUrl')
		},
		// #ifdef MP
		onShareAppMessage() {
			return {
				title:'分享海报',
				path:'/pages/home/home?inviter_code='+uni.getStorageSync('inviter_code')+'&zhiboid='+this.id,
				imageUrl:this.image||'/static/logo.jpg'
			};
		},
		// #endif
		onShow() {
			let that = this
			that.isVideoLive = true
			if(that.tui.isLogin()){
				that.tui.TongjiLive(1, this.id)
			}
		},
		onHide() {
			// alert(2222)
			let that = this
			that.isVideoLive = false
			if(uni.getStorageSync('lookLive')==1){
				that.tui.TongjiLive(2, this.id)
			}
		},
		onBackPress() {
			// alert(3333)
			let that = this
			that.isVideoLive = false
			that.closeGoeasy()
			if(uni.getStorageSync('lookLive')==1){
				that.tui.TongjiLive(2, this.id)
			}
		},
		onUnload() {
			// alert(4444)
			let that = this
			that.isVideoLive = false
			that.closeGoeasy()
			if(uni.getStorageSync('lookLive')==1){
				that.tui.TongjiLive(2, this.id)
			}
		},
		methods: {
			onBack(){
				uni.switchTab({
					url:'/pages/home/home'
				})
				// uni.navigateTo({
				// 	url:'/pages/MyOrderList/MyOrderList'
				// })
			},
			guanbi(){
				let that = this
				that.show = false
				that.getBijiao()
			},
			getBijiao(){
				let that = this
				that.id=that.dataInfo.zhiboid
				that.getList()
			},
			finish(e){
				let that = this
				that.isShow = false
				if(e.type==0){
					that.payshow=false
					that.dingdanshow = true
					that.$refs.tOrderList.getList()
				}else{
					that.cjshow = true
					that.$refs.tConfirmOrder.getdata(e.order_no)
					that.$refs.tConfirmOrder.getInfo()
				}
			},
			cfmfinish(e){
				let that = this
				that.cjshow = false
				if(e.type==2){
					that.payshow = true
					that.zhifu = e.zhifu
				}else{
					that.zhiurl = e.url
					that.zhishow = true
				}
			},
			payfinish(e){
				let that = this
				if(e.type==0){
					that.isShow=false
					that.cjshow=false
					that.payshow=false
					that.zhishow=false
				}else{
					that.payshow=false
					that.dingdanshow = true
					that.$refs.tOrderList.getList()
				}
			},
			getJianting(){
				let that = this
				window.addEventListener('message', function (event) {
				    // 获取消息内容
				    var messageEvent = event.data;
				 
				    // 打印消息内容
				    // console.log(messageEvent);
				 
				    // 检查 messageEvent 是否存在或者是一个对象类型。
				    if (!messageEvent || typeof messageEvent !== 'object') {
				        // 输出错误信息 'Received invalid message event:'，并将 messageEvent 的值打印出来。
				        // console.error('Received invalid message event:', messageEvent);
				        // 返回（结束当前函数的执行）。
				        return;
				    }
				    // 检查消息类型是否为 "vhOpenHref"，并提取URL
				    if (messageEvent.type === 'vhOpenHref' && typeof messageEvent.data === 'string') {
				 
				        // 在移动端浏览器上运行的逻辑
						that.id = that.getParam(messageEvent.data,'id')
						that.$refs.tOrderDetail.getdata(that.getParam(messageEvent.data,'id'))
						that.isShow = true
						// that.tui.href('/pages/GoodsDetails/GoodsDetails?id='+that.getParam(messageEvent.data,'id'))
				         // window.location.href = messageEvent.data;
				    } else {
						
				    }
				});
			},
			getParam(path, name) {
				  var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");   
				  if (reg.test(path))  
				  return unescape(RegExp.$2.replace(/\+/g, " ")); 
				  return "";    
			},
			qiandao(){
				console.log(1111)
				this.tui.href('/pages/SignIn/SignIn')
			},
			onMessage(e) {
				let that = this
				that.tui.href('/pages/ConfirmOrder/ConfirmOrder?order_no='+e.detail.data)
			  console.log('Received message from web page:', e.detail.data);
			},
			getList(){
				let that = this
				let data = {}
				that.tui.request("api.auth.room/roomListAll", "POST", {page:that.page}, false, false, true).then((res) => {
					if(res.code==1){
						res.data.list.map(item=>{
							if(that.id==item.id){
								that.url = item.url
								uni.setStorageSync('zhiboStatus',item)
								data.title = uni.getStorageSync('shareTitle')
								data.desc = item.name
								data.share_img = item.cover
								that.room_id = item.room_id
								uni.setStorageSync('shareZhibo', data)
								that.tui.wxShare(1,item.id)
								// that.getSockt()
								that.getDjs()
							}
						})
					}
				}).catch((res) => {
					
				})
			},
			getStatus(){
				let that = this
				that.tui.request("api.auth.center/phoneStatus", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						if(res.data.is_phone==2){
							that.show = true
						}else{
							that.getBijiao()
						}
					}
				}).catch((res) => {
				
				})
				
			},
			getSockt(){
				let that = this
				that.goeasy = GoEasy.getInstance({
				    host: 'hangzhou.goeasy.io', 
				    appkey: 'BC-3a4f724414d441d2b3061e8e6edd9d37',
				    modules: ['pubsub'],
				});
				that.goeasy.connect({
					onSuccess: function () {  //连接成功
					  console.log("GoEasy connect successfully.") //连接成功
					},
					onFailed: function (error) { //连接失败
					  console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
					},
					onProgress:function(attempts) { //连接或自动重连中
					  console.log("GoEasy is connecting", attempts);
					}
				});
				that.goeasy.pubsub.subscribe({
				    channel: that.room_id,//替换为您自己的channel
				    onMessage: function (message) {
				        //收到消息
				        console.log("Channel:" + message.channel + " content:" + message.content);
						if(Number(message.channel)===that.room_id){
							console.log('收到消息:', JSON.parse(message.content));
							if(JSON.parse(message.content).type===1){
							  that.bottomshow = true
							  that.coupon_data = JSON.parse(message.content)
							}else if(JSON.parse(message.content).type===2){
							  that.bottomshow = false
							  that.coupon_data = ''
							}
						}
				    },
				    onSuccess: function () {
				        console.log("Channel订阅成功:"+that.room_id);
						that.isSocket = true
				    },
				    onFailed: function (error) {
				        console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
				    }
				});
			},
			closeGoeasy(){
				let that = this
				that.goeasy.disconnect({
					onSuccess: function(){
						console.log("GoEasy disconnect successfully.")
						that.isSocket = false
					},
					onFailed: function(error){
						console.log("Failed to disconnect GoEasy, code:"+error.code+ ",error:"+error.content);
					}
				});
			},
			getYhq(){
				let that = this
				that.tui.request("api.auth.live/couponReceive", "POST", {coupon_id:Number(that.coupon_data.coupon_id),source:'live',push_log_id:Number(that.coupon_data.push_log_id),room_id:that.room_id}, false, false, false).then((res) => {
					if(res.code==1){
						that.modal = true
						that.bottomshow = false
					}
				}).catch((res) => {
					
				})
			},
			getDjs(){
				let that = this
				that.tui.request("api.auth.live/enter_room", "POST", {room_id:that.room_id}, false, false, true).then((res) => {
					if(res.code==1){
						that.getSockt()
						if(res.data.coupon){
							that.coupon_data = res.data.coupon
							that.coupon_data.is_use_coupon==0?that.bottomshow=true:that.bottomshow=false
						}
					}
				}).catch((res) => {
							
				})
			},
		}
	}
</script>
 
 
<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.player-content {
			position: relative;
			width: 100%;
			height: 450rpx;
			display: flex;
			background-size: 100% 100%;
 
			.live-player {
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
	}
	.back{
		position: fixed;
		right: 20rpx;
		bottom:40vh;
		display: flex;
		align-items: center;
		justify-content: center;z-index: 99999;
		width: 100rpx;
		height: 100rpx;
		// 返回
		.back-one{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50rpx;
			height: 50rpx;
			background-color: rgba(0,0,0,0.3);
			border-radius: 100%;
			text{
				display: flex;
				width: 20rpx;
				height: 20rpx;
				border-left: 2rpx solid #FFFFFF;
				border-bottom: 2rpx solid #FFFFFF;
				transform: rotate(45deg);
			}
		}
		.action{
			background-color: transparent;
			text{
				border-color: #555555;
			}
		}
	}
	//播放器弹出工具
	.player-tool {
		width: 100%;
		height: 60rpx;
		background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 0;
		padding: 0 45rpx;
		transition: all 0.3s;
		.tools {
			height: 100%;
			width: auto;
			display: flex;
			align-items: center;
 
			.full-screen {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
 
				.iconfont {
					color: #fff;
					font-weight: bold;
 
				}
			}
 
			.cruise {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 25rpx;
 
				.iconfont {
					color: #E45A3E;
					font-size: 45rpx;
				}
			}
		}
 
	}
	.showYhq{position: fixed;z-index: 999;bottom: 120rpx;right: -270rpx;
		.list{width: 272rpx;height: 388rpx; background: url('@/static/zibo_01.png') no-repeat;background-size: 100% 100%;text-align: center;padding-top: 80rpx;padding-bottom: 20rpx;
			.title{color: #F8E1BA;font-size: 14px;width: 220rpx;margin: 0 auto;}
			.duihuan{margin: 15rpx 0 25rpx;
				align-items: flex-end;color:#F8E1BA;
				.center{font-size: 30px;padding: 0 10rpx;line-height: .8;font-weight: bold;min-width: 60rpx;}
				.right{font-weight: bold;}
			}
			.tiaojian{color: #F8E1BA;font-size: 12px;margin: 14rpx 0 6rpx;line-height: 1;}
			.time{font-size: 10px;color: #8B2D21;width: 160rpx;margin: 0 auto;}
			.btn{width: 168rpx;height: 50rpx;background: #F0C59F; background: url('@/static/zhibo_08.png') no-repeat;background-size: 100% 100%;margin: 50rpx auto 0;line-height: 38rpx;}
		}
		.yhlist{ background: url('@/static/zibo_02.png') no-repeat;background-size: 100% 100%;}
	}
	.showYhq.fade-in {
	    animation: fadeIn 1s ease-in-out forwards;
	}
	.imaggs{text-align: center;
		image{width: 460rpx;height: 300rpx;}
	}
	@keyframes fadeIn {
	    from {
	        opacity: 0;
			right: -270rpx;
	    }
	    to {
	        opacity: 1;
			right: 20rpx;
	    }
	}
</style>
